<template>
  <div class="cyberpunk-wrapper">
    <div class="cyberpunk-container">
      <div class="cyberpunk-login">
        <div class="cyberpunk-header">
          <h2 class="cyberpunk-title">SYSTEM REGISTER</h2>
          <div class="cyberpunk-line"></div>
        </div>
        <form @submit.prevent="handleRegister" class="cyberpunk-form">
          <!-- 电话号码 -->
          <div class="cyberpunk-input-group">
            <input 
              placeholder="PHONE NUMBER *" 
              v-model="form.phone" 
              type="text" 
              autocomplete="off" 
              required
              class="cyberpunk-input"
            />
            <span class="cyberpunk-highlight"></span>
            <span class="cyberpunk-bar"></span>
          </div>

          <!-- 用户名 -->
          <div class="cyberpunk-input-group">
            <input 
              placeholder="USERNAME *" 
              v-model="form.username" 
              type="text" 
              autocomplete="off" 
              required
              class="cyberpunk-input"
            />
            <span class="cyberpunk-highlight"></span>
            <span class="cyberpunk-bar"></span>
          </div>

          <!-- 密码 -->
          <div class="cyberpunk-input-group">
            <input 
              placeholder="PASSWORD *" 
              v-model="form.password" 
              type="password" 
              autocomplete="off" 
              required
              class="cyberpunk-input"
            />
            <span class="cyberpunk-highlight"></span>
            <span class="cyberpunk-bar"></span>
          </div>

          <!-- 头像上传 -->
          <div class="cyberpunk-upload-group">
            <label class="cyberpunk-upload-label">
              AVATAR *
              <div class="cyberpunk-upload-area" @click="triggerFileInput">
                <div v-if="!avatarPreview" class="cyberpunk-upload-placeholder">
                  <span>CLICK TO UPLOAD</span>
                </div>
                <img v-else :src="avatarPreview" class="cyberpunk-avatar-preview" />
                <input 
                  type="file" 
                  ref="fileInput"
                  accept="image/*"
                  @change="handleFileChange"
                  class="cyberpunk-upload-input"
                  required
                />
              </div>
            </label>
          </div>

          <!-- 备注 -->
          <div class="cyberpunk-input-group">
            <textarea 
              placeholder="REMARKS (OPTIONAL)" 
              v-model="form.remarks" 
              class="cyberpunk-input cyberpunk-textarea"
              rows="3"
            ></textarea>
            <span class="cyberpunk-highlight"></span>
            <span class="cyberpunk-bar"></span>
          </div>

          <!-- 注册按钮 -->
          <button type="submit" class="cyberpunk-button">
            <span class="cyberpunk-button-text">REGISTER</span>
            <span class="cyberpunk-button-glitch"></span>
            <span class="cyberpunk-button-detail"></span>
          </button>
          
          <!-- 返回登录按钮 -->
          <button 
            type="button" 
            class="cyberpunk-button secondary"
            @click="goToLogin"
          >
            <span class="cyberpunk-button-text">BACK TO LOGIN</span>
            <span class="cyberpunk-button-glitch"></span>
            <span class="cyberpunk-button-detail"></span>
          </button>
        </form>
        <div class="cyberpunk-grid">
          <div class="cyberpunk-grid-line"></div>
          <div class="cyberpunk-grid-line"></div>
          <div class="cyberpunk-grid-line"></div>
        </div>
      </div>
      <div class="cyberpunk-scanline"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 表单数据
const form = ref({
  phone: '',
  username: '',
  password: '',
  avatar: null,
  remarks: ''
})

const fileInput = ref(null)
const avatarPreview = ref(null)

// 触发文件选择
const triggerFileInput = () => {
  fileInput.value.click()
}

// 处理文件选择
const handleFileChange = (e) => {
  const file = e.target.files[0]
  if (file) {
    // 验证文件类型
    if (!file.type.startsWith('image/')) {
      ElMessage.error('Please upload an image file')
      return
    }
    
    // 验证文件大小 (限制2MB)
    if (file.size > 2 * 1024 * 1024) {
      ElMessage.error('Image size should be less than 2MB')
      return
    }
    
    form.value.avatar = file
    avatarPreview.value = URL.createObjectURL(file)
  }
}

// 注册处理
const handleRegister = async () => {
  // 验证必填字段
  if (!form.value.phone || !form.value.username || !form.value.password || !form.value.avatar) {
    ElMessage.error('Please fill in all required fields')
    return
  }

  try {
    // 创建FormData对象用于文件上传
    const formData = new FormData()
    formData.append('phone', form.value.phone)
    formData.append('username', form.value.username)
    formData.append('password', form.value.password)
    formData.append('avatar', form.value.avatar)
    formData.append('remarks', form.value.remarks)

    // 这里替换为实际的注册API调用
    // const response = await request.post('/user/register', formData)
    
    // 模拟成功响应
    ElMessage.success('Registration successful!')
    router.push('/login')
  } catch (error) {
    console.error('Registration failed:', error)
    ElMessage.error('Registration failed. Please try again.')
  }
}

// 返回登录
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
/* 基础样式复用登录页面的，只新增特定样式 */

/* 上传区域样式 */
.cyberpunk-upload-group {
  margin-bottom: 30px;
}

.cyberpunk-upload-label {
  display: block;
  color: #00ffff;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.cyberpunk-upload-area {
  position: relative;
  width: 100%;
  height: 120px;
  border: 1px dashed rgba(0, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cyberpunk-upload-area:hover {
  border-color: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.cyberpunk-upload-placeholder {
  color: rgba(0, 255, 255, 0.5);
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
}

.cyberpunk-upload-input {
  display: none;
}

.cyberpunk-avatar-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文本区域样式 */
.cyberpunk-textarea {
  resize: none;
  padding: 10px;
  height: auto;
  min-height: 80px;
}
</style>